<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TB_TAG功能测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; }
        .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .header { text-align: center; color: #333; margin-bottom: 30px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .test-section h3 { color: #2c3e50; margin-top: 0; }
        .btn { padding: 10px 20px; margin: 5px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary { background-color: #007bff; color: white; }
        .btn-success { background-color: #28a745; color: white; }
        .btn-warning { background-color: #ffc107; color: black; }
        .btn-danger { background-color: #dc3545; color: white; }
        .btn-info { background-color: #17a2b8; color: white; }
        .btn:hover { opacity: 0.8; }
        .result { margin-top: 10px; padding: 10px; border-radius: 4px; white-space: pre-wrap; font-family: monospace; max-height: 300px; overflow-y: auto; }
        .success { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .error { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        .info { background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }
        .loading { color: #6c757d; }
        .form-group { margin: 10px 0; }
        .form-group label { display: inline-block; width: 100px; }
        .form-group input, .form-group select { padding: 5px; margin-left: 10px; width: 200px; }
        .tag-type-1 { background-color: #007bff; color: white; padding: 2px 8px; border-radius: 3px; }
        .tag-type-2 { background-color: #28a745; color: white; padding: 2px 8px; border-radius: 3px; }
        .tag-type-3 { background-color: #6c757d; color: white; padding: 2px 8px; border-radius: 3px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🏷️ TB_TAG功能测试页面</h1>
            <p>测试TB_TAG标签管理的完整CRUD功能</p>
        </div>

        <div class="test-section">
            <h3>📡 连接测试</h3>
            <button class="btn btn-primary" onclick="testConnection()">测试连接</button>
            <button class="btn btn-info" onclick="testDiagnose()">系统诊断</button>
            <div id="connectionResult" class="result" style="display:none;"></div>
        </div>

        <div class="test-section">
            <h3>📋 查询功能测试</h3>
            <div class="form-group">
                <label>标签名称:</label>
                <input type="text" id="searchTagName" placeholder="输入标签名称">
            </div>
            <div class="form-group">
                <label>标签类型:</label>
                <select id="searchTagType">
                    <option value="">全部</option>
                    <option value="1">兴趣爱好</option>
                    <option value="2">技能特长</option>
                    <option value="3">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label>标签状态:</label>
                <select id="searchTagStatus">
                    <option value="">全部</option>
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            <button class="btn btn-primary" onclick="searchTags()">查询标签</button>
            <button class="btn btn-info" onclick="getAllTags()">获取所有标签</button>
            <div id="searchResult" class="result" style="display:none;"></div>
        </div>

        <div class="test-section">
            <h3>➕ 新增功能测试</h3>
            <div class="form-group">
                <label>标签名称:</label>
                <input type="text" id="addTagName" placeholder="输入标签名称">
            </div>
            <div class="form-group">
                <label>标签类型:</label>
                <select id="addTagType">
                    <option value="1">兴趣爱好</option>
                    <option value="2">技能特长</option>
                    <option value="3">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label>标签状态:</label>
                <select id="addTagStatus">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            <button class="btn btn-success" onclick="addTag()">新增标签</button>
            <button class="btn btn-warning" onclick="addTestTags()">批量添加测试数据</button>
            <div id="addResult" class="result" style="display:none;"></div>
        </div>

        <div class="test-section">
            <h3>✏️ 修改功能测试</h3>
            <div class="form-group">
                <label>标签ID:</label>
                <input type="number" id="updateTagId" placeholder="输入要修改的标签ID">
            </div>
            <div class="form-group">
                <label>新标签名称:</label>
                <input type="text" id="updateTagName" placeholder="输入新的标签名称">
            </div>
            <div class="form-group">
                <label>新标签类型:</label>
                <select id="updateTagType">
                    <option value="1">兴趣爱好</option>
                    <option value="2">技能特长</option>
                    <option value="3">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label>新标签状态:</label>
                <select id="updateTagStatus">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            <button class="btn btn-warning" onclick="getTagInfo()">获取标签信息</button>
            <button class="btn btn-primary" onclick="updateTag()">修改标签</button>
            <div id="updateResult" class="result" style="display:none;"></div>
        </div>

        <div class="test-section">
            <h3>🗑️ 删除功能测试</h3>
            <div class="form-group">
                <label>标签ID:</label>
                <input type="text" id="deleteTagIds" placeholder="输入要删除的标签ID，多个用逗号分隔">
            </div>
            <button class="btn btn-danger" onclick="deleteTag()">删除标签</button>
            <div id="deleteResult" class="result" style="display:none;"></div>
        </div>

        <div class="test-section">
            <h3>📊 数据展示</h3>
            <button class="btn btn-info" onclick="showTagStatistics()">显示标签统计</button>
            <div id="statisticsResult" class="result" style="display:none;"></div>
        </div>
    </div>

    <script>
        const baseURL = 'http://localhost:8080';
        
        function showResult(elementId, content, type = 'info') {
            const element = document.getElementById(elementId);
            element.className = `result ${type}`;
            element.textContent = content;
            element.style.display = 'block';
        }

        function showLoading(elementId) {
            showResult(elementId, '正在处理...', 'loading');
        }

        function formatTagData(tags) {
            if (!Array.isArray(tags)) return JSON.stringify(tags, null, 2);
            
            return tags.map(tag => {
                const typeText = tag.tagType === 1 ? '兴趣爱好' : tag.tagType === 2 ? '技能特长' : '其他';
                const statusText = tag.tagStatus === 1 ? '启用' : '禁用';
                return `ID: ${tag.tagId} | 名称: ${tag.tagName} | 类型: ${typeText} | 状态: ${statusText} | 创建时间: ${tag.createdAt}`;
            }).join('\n');
        }

        async function testConnection() {
            showLoading('connectionResult');
            try {
                const response = await fetch(`${baseURL}/test/tbtag/ping`);
                const data = await response.json();
                if (response.ok) {
                    showResult('connectionResult', `✅ 连接成功!\n${JSON.stringify(data, null, 2)}`, 'success');
                } else {
                    showResult('connectionResult', `❌ 连接失败!\n状态码: ${response.status}\n响应: ${JSON.stringify(data, null, 2)}`, 'error');
                }
            } catch (error) {
                showResult('connectionResult', `❌ 网络错误!\n${error.message}`, 'error');
            }
        }

        async function testDiagnose() {
            showLoading('connectionResult');
            try {
                const response = await fetch(`${baseURL}/test/tbtag/diagnose`);
                const data = await response.json();
                showResult('connectionResult', `🔍 系统诊断结果:\n${JSON.stringify(data, null, 2)}`, 'info');
            } catch (error) {
                showResult('connectionResult', `❌ 诊断失败!\n${error.message}`, 'error');
            }
        }

        async function getAllTags() {
            showLoading('searchResult');
            try {
                const response = await fetch(`${baseURL}/homepage/tag/list`);
                const data = await response.json();
                if (response.ok && data.rows) {
                    showResult('searchResult', `✅ 查询成功! 共 ${data.total} 条记录\n\n${formatTagData(data.rows)}`, 'success');
                } else {
                    showResult('searchResult', `❌ 查询失败!\n${JSON.stringify(data, null, 2)}`, 'error');
                }
            } catch (error) {
                showResult('searchResult', `❌ 查询错误!\n${error.message}`, 'error');
            }
        }

        async function searchTags() {
            showLoading('searchResult');
            const params = new URLSearchParams();
            const tagName = document.getElementById('searchTagName').value;
            const tagType = document.getElementById('searchTagType').value;
            const tagStatus = document.getElementById('searchTagStatus').value;
            
            if (tagName) params.append('tagName', tagName);
            if (tagType) params.append('tagType', tagType);
            if (tagStatus) params.append('tagStatus', tagStatus);
            
            try {
                const response = await fetch(`${baseURL}/homepage/tag/list?${params}`);
                const data = await response.json();
                if (response.ok && data.rows) {
                    showResult('searchResult', `✅ 搜索成功! 共 ${data.total} 条记录\n\n${formatTagData(data.rows)}`, 'success');
                } else {
                    showResult('searchResult', `❌ 搜索失败!\n${JSON.stringify(data, null, 2)}`, 'error');
                }
            } catch (error) {
                showResult('searchResult', `❌ 搜索错误!\n${error.message}`, 'error');
            }
        }

        async function addTag() {
            showLoading('addResult');
            const tagData = {
                tagName: document.getElementById('addTagName').value,
                tagType: parseInt(document.getElementById('addTagType').value),
                tagStatus: parseInt(document.getElementById('addTagStatus').value)
            };
            
            if (!tagData.tagName) {
                showResult('addResult', '❌ 请输入标签名称!', 'error');
                return;
            }
            
            try {
                const response = await fetch(`${baseURL}/homepage/tag`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(tagData)
                });
                const data = await response.json();
                if (response.ok) {
                    showResult('addResult', `✅ 新增成功!\n${JSON.stringify(data, null, 2)}`, 'success');
                    // 清空表单
                    document.getElementById('addTagName').value = '';
                } else {
                    showResult('addResult', `❌ 新增失败!\n${JSON.stringify(data, null, 2)}`, 'error');
                }
            } catch (error) {
                showResult('addResult', `❌ 新增错误!\n${error.message}`, 'error');
            }
        }

        async function addTestTags() {
            showLoading('addResult');
            const testTags = [
                { tagName: '摄影', tagType: 1, tagStatus: 1 },
                { tagName: '旅行', tagType: 1, tagStatus: 1 },
                { tagName: 'Java开发', tagType: 2, tagStatus: 1 },
                { tagName: 'UI设计', tagType: 2, tagStatus: 1 },
                { tagName: '美食', tagType: 3, tagStatus: 1 }
            ];
            
            let results = [];
            for (const tag of testTags) {
                try {
                    const response = await fetch(`${baseURL}/homepage/tag`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(tag)
                    });
                    const data = await response.json();
                    results.push(`${tag.tagName}: ${response.ok ? '成功' : '失败'}`);
                } catch (error) {
                    results.push(`${tag.tagName}: 错误 - ${error.message}`);
                }
            }
            
            showResult('addResult', `📊 批量添加结果:\n${results.join('\n')}`, 'info');
        }

        async function getTagInfo() {
            const tagId = document.getElementById('updateTagId').value;
            if (!tagId) {
                showResult('updateResult', '❌ 请输入标签ID!', 'error');
                return;
            }
            
            showLoading('updateResult');
            try {
                const response = await fetch(`${baseURL}/homepage/tag/${tagId}`);
                const data = await response.json();
                if (response.ok && data.data) {
                    const tag = data.data;
                    document.getElementById('updateTagName').value = tag.tagName;
                    document.getElementById('updateTagType').value = tag.tagType;
                    document.getElementById('updateTagStatus').value = tag.tagStatus;
                    showResult('updateResult', `✅ 获取标签信息成功!\n${JSON.stringify(tag, null, 2)}`, 'success');
                } else {
                    showResult('updateResult', `❌ 获取失败!\n${JSON.stringify(data, null, 2)}`, 'error');
                }
            } catch (error) {
                showResult('updateResult', `❌ 获取错误!\n${error.message}`, 'error');
            }
        }

        async function updateTag() {
            const tagId = document.getElementById('updateTagId').value;
            const tagData = {
                tagId: parseInt(tagId),
                tagName: document.getElementById('updateTagName').value,
                tagType: parseInt(document.getElementById('updateTagType').value),
                tagStatus: parseInt(document.getElementById('updateTagStatus').value)
            };
            
            if (!tagId || !tagData.tagName) {
                showResult('updateResult', '❌ 请输入标签ID和标签名称!', 'error');
                return;
            }
            
            showLoading('updateResult');
            try {
                const response = await fetch(`${baseURL}/homepage/tag`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(tagData)
                });
                const data = await response.json();
                if (response.ok) {
                    showResult('updateResult', `✅ 修改成功!\n${JSON.stringify(data, null, 2)}`, 'success');
                } else {
                    showResult('updateResult', `❌ 修改失败!\n${JSON.stringify(data, null, 2)}`, 'error');
                }
            } catch (error) {
                showResult('updateResult', `❌ 修改错误!\n${error.message}`, 'error');
            }
        }

        async function deleteTag() {
            const tagIds = document.getElementById('deleteTagIds').value;
            if (!tagIds) {
                showResult('deleteResult', '❌ 请输入要删除的标签ID!', 'error');
                return;
            }
            
            if (!confirm('确认要删除这些标签吗？')) {
                return;
            }
            
            showLoading('deleteResult');
            try {
                const response = await fetch(`${baseURL}/homepage/tag/${tagIds}`, {
                    method: 'DELETE'
                });
                const data = await response.json();
                if (response.ok) {
                    showResult('deleteResult', `✅ 删除成功!\n${JSON.stringify(data, null, 2)}`, 'success');
                    document.getElementById('deleteTagIds').value = '';
                } else {
                    showResult('deleteResult', `❌ 删除失败!\n${JSON.stringify(data, null, 2)}`, 'error');
                }
            } catch (error) {
                showResult('deleteResult', `❌ 删除错误!\n${error.message}`, 'error');
            }
        }

        async function showTagStatistics() {
            showLoading('statisticsResult');
            try {
                const response = await fetch(`${baseURL}/homepage/tag/list`);
                const data = await response.json();
                if (response.ok && data.rows) {
                    const tags = data.rows;
                    const stats = {
                        total: tags.length,
                        byType: {
                            hobby: tags.filter(t => t.tagType === 1).length,
                            skill: tags.filter(t => t.tagType === 2).length,
                            other: tags.filter(t => t.tagType === 3).length
                        },
                        byStatus: {
                            enabled: tags.filter(t => t.tagStatus === 1).length,
                            disabled: tags.filter(t => t.tagStatus === 0).length
                        }
                    };
                    
                    const statsText = `📊 标签统计信息:
总数量: ${stats.total}

按类型分布:
- 兴趣爱好: ${stats.byType.hobby}
- 技能特长: ${stats.byType.skill}  
- 其他: ${stats.byType.other}

按状态分布:
- 启用: ${stats.byStatus.enabled}
- 禁用: ${stats.byStatus.disabled}

最新标签:
${tags.slice(0, 5).map(t => `- ${t.tagName} (${t.tagType === 1 ? '兴趣爱好' : t.tagType === 2 ? '技能特长' : '其他'})`).join('\n')}`;
                    
                    showResult('statisticsResult', statsText, 'info');
                } else {
                    showResult('statisticsResult', `❌ 获取统计失败!\n${JSON.stringify(data, null, 2)}`, 'error');
                }
            } catch (error) {
                showResult('statisticsResult', `❌ 统计错误!\n${error.message}`, 'error');
            }
        }
    </script>
</body>
</html>
